<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页满意度调查</title>
    <style>
        html{
            width: 100%;
            font-size: 12px;
        }
        #all{
            width: 75%;
            /*border: 1px solid black;*/
            margin: 0 auto;
        }
        .head img{
            vertical-align: middle;
            width: 170px;
        }
        .head{
            border-bottom: 2px solid red;
            font-size: 22px;
            color: #666;
        }
        .head span{
            position: relative;
            left: 20px;
            top: 10px;

        }
        .f1 pre{
            font-size: 12px;
        }
        .f2{
            width: 100%;
            height: 155px;
            border: 1px solid #cce8ff;
            padding: 1px;
        }
        .f2 .t1{
            height: 28px;
            line-height: 28px;
            padding-left: 10px;
            background-color: #eef6ff;
            font-weight: bold;
        }
        .f2 .t1 span{
            color: red;
        }
        .f2 .t2{
            margin-left: 35px;
            margin-top: 10px;
        }
        .f2 .t2 div input[type=radio]{
            position: relative;
            top: 2px;
        }



        .f3{
            width: 100%;
            /*height: 185px;*/
            border: 1px solid #cce8ff;
            padding: 1px;
        }
        .f3 .t1{
            height: 28px;
            line-height: 28px;
            padding-left: 15px;
            background-color: #eef6ff;
            font-weight: bold;
        }
        .f3 .t2 textarea{
            margin-top: 30px;
            margin-left: 50px;
            margin-bottom: 30px;
        }



        .f4{
            width: 100%;
            height: 135px;
            border: 1px solid #cce8ff;
            padding: 1px;
        }
        .f4 .t1{
            height: 38px;
            line-height: 28px;
            padding-left: 15px;
            background-color: #eef6ff;
            font-weight: bold;
        }
        .f4 .t1 span{
            color: red;
        }
        .f4 .t2 div:nth-of-type(1) input{
            margin-left: 12px;
        }
        .f4 .t2 div{
            height:25px;
            position: relative;
            left: 50px;
            top: 25px;
        }

        .f5{
            height: 35px;
            background-color: #eef6ff;
            border: 1px solid #cce8ff;
        }
        .f5  input[type=button]{
            width: 55px;
            height: 90%;
            margin-top: 2px;
            margin-left: 47%;
            background-color: #e3f1fa;
            border: 1px solid #aed0ea;
            border-radius: 8px;
            color: #0070a3;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="all">
    <div class="head">
        <img src="https://surveys.jd.com/upload/templates/360buy3/logo-w-s.png">
        <span>登录页满意度调查</span>
    </div>

    <div class="f1">
        <pre>

            尊敬用户您好:

            为了给您提供更加完善的服务,我们希望收集并了解您在页面的使用情况。对您的配合和支持表示衷心的感谢！
        </pre>
    </div>

    <div style="height: 15px"></div>

    <div class="f2">
        <div class="t1">
            <span>*</span> 您对登录页整体满意度如何？
        </div>

        <div class="t2">
            <div><input type="radio"> <span>非常满意</span></div>
            <div><input type="radio"> <span>满意</span></div>
            <div><input type="radio"> <span>一般</span></div>
            <div><input type="radio"> <span>不满意</span></div>
            <div><input type="radio"> <span>非常不满意</span></div>
        </div>
    </div>

    <div style="height: 10px"></div>

    <div class="f3">
        <div class="t1">
            您对登录页有什么想法，请大声说出来吧！（例如：哪里有问题，哪些功能做得不够好等）
        </div>

        <div class="t2">
            <textarea rows="5%" cols="40%"></textarea>
        </div>
    </div>

    <div style="height: 40px"></div>

    <div class="f4">
        <div class="t1">
            如果您对京东的使用体验有任何想法，欢迎微信搜索并关注“<span>京东用户体验中心</span>”公众号，参与更多用户体验活动。
        </div>

        <div class="t2">
            <div><span>姓名</span> <input type="text"></div>
            <div><span>手机号</span> <input type="text"></div>
        </div>
    </div>

    <div style="height: 10px;"></div>

    <div class="f5">
             <input type="button" value="提交">
    </div>

    <div style="height: 30px;"></div>
</div>
</body>
</html>